<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <div :style="{display:list.length?'none':'block'}">
      <van-empty image="search" description="请请请搜索" />
    </div>
    <div class="menuList">
      <div class="item" v-for="(v,i) in list" :key="i" @click="handClick(v)">{{v.communityName}}</div>
    </div>
  </div>
</template>

<script>
import {  mapState} from 'vuex';
export default {
  data() {
    return {
      value: "",
      list: []
    };
  },
  computed:{
    ...mapState('city',['cityId'])
  },
  methods: {
    handClick(v) {
      let searchFrom = {
        community: v.community,
        communityName: v.communityName
      };
      this.$router.push({ path: "/rent/add", query: searchFrom });
    },
    onInput() {
      if (!this.value) {
        this.list = [];
      }
    },
    async onSearch() {
      let res = await this.$http.searchCommunity({
        name: this.value,
        id: this.cityId,
      });
      this.list = res.data.body;
    },
    onCancel() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100%;
}
.menuList {
  padding: 0 10px;
}
.menuList .item {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  color: #aaa;
}
</style>